import React, { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Row, Col, Tree, Tag, Pagination, Table, Button } from 'antd'
import type { DataNode, TreeProps } from 'antd/es/tree'
import type { ColumnsType } from 'antd/es/table'
import { reqGetDepList, reqGetScheduleList } from '@api/hospitalList'
import {
  IdepList,
  IscheduleList,
} from '@api/hospitalList/model/hospitalListTypes'

let depcode: string //用于存储当前所选中的科室的编码
export default function HospitalSchedule() {
  // 用于存储所有科室数据
  const [depList, setDepList] = useState<IdepList>([])

  // 存储所有一级科室的depcode,用来让一级科室展开
  const [oneDepCodes, setOneDepCodes] = useState<string[]>([])

  // 分页相关的状态
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(0)

  // 排班规则数据
  const [schedule, setSchedule] = useState<IscheduleList>([])

  // 面包屑相关状态
  const [depname, setDepName] = useState('')
  const [workDate, setWorkDate] = useState('')

  useEffect(() => {
    // 组件挂载的时候获取所有科室数据
    getDepList()
  }, [])
  // 从医院列表页面跳转到医院排班界面传递了当前医院的医院编码. 由于使用location.state方式传递.所以获取医院编码必须调用useLocation得到location对象,我们这里直接解构了location对象,但是对应的属性叫state,并没有见名知意,所以解构的时候直接重命名为hoscode
  // const { state: hoscode } = useLocation()
  // 为了解决ts问题,将获取state并重命名为hoscode的代码进行修改
  const { hosname, hoscode } = useLocation().state as {
    hoscode: string
    hosname: string
  }

  // 获取所有科室数据
  async function getDepList() {
    const result = await reqGetDepList(hoscode)
    // 因为要给所有的一级科室对象添加disabled:true的属性,所以在给状态赋值之前,先遍历服务器响应回来的数据,添加disabled
    result.forEach((item) => (item.disabled = true))
    setDepList(result)
    // 遍历所有科室数据,然后将一级科室数据存放到一个数组中
    const arr = result.map((item) => item.depcode)
    setOneDepCodes(arr)

    // 发送请求,默认请求第一个一级科室中的第一个二级科室的排班规则
    depcode = result[0].children[0].depcode
    getSchedule(page, pageSize, depcode)

    // 从所有科室数据中找到第一个一级科室的第一个二级科室的名称
    const depname = result[0].children[0].depname
    setDepName(depname)
  }

  // 获取排班规则的函数
  async function getSchedule(page: number, pageSize: number, depcode: string) {
    const result = await reqGetScheduleList(page, pageSize, hoscode, depcode)
    setTotal(result.total)
    setSchedule(result.bookingScheduleList)

    // 获取第一个排班规则的workDate
    const workDate = result.bookingScheduleList[0].workDate
    setWorkDate(workDate)
  }

  // 当点击了节点的时候触发
  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    // selectedKeys 是一个数组,存储了被选中的节点的key值. info是一个对象,存储了被选中的节点的一些其他信息
    console.log('selected', selectedKeys, info)
  }

  // 表格的列
  // 注意: Table组件中要渲染的数据对象的类型是可以修改的.就通过ColumnsType的泛型传入.但是Tree组件默认只能渲染类型为DataNode的数据对象,并且无法修改
  const columns: ColumnsType<any> = [
    {
      title: '序号',
      render(a, b, index) {
        return index + 1
      },
    },
    {
      title: '职称',
    },
    {
      title: '号源时间',
    },
    {
      title: '可预约数',
    },
    {
      title: '剩余预约数',
    },
    {
      title: '挂号费(元)',
    },
    {
      title: '擅长技能',
    },
  ]

  return (
    <Card>
      <p>
        选择：{hosname} / {depname} / {workDate}
      </p>
      {/* Row 是antd中栅格系统的一行.Col代表一行中的一列. Col必须写在Row中 */}
      <div>
        <Row gutter={20}>
          <Col span={5}>
            <div
              style={{
                border: '1px solid #999',
                height: 400,
                overflow: 'scroll',
              }}
            >
              <Tree
                // checkable // 树形解构中是否展示复选框
                // 每一条数据在树结构中就是一个节点.每一个节点都有key值.所以每一个节点的key值就代表这个节点.所以要控制节点,一般都是传入这个节点的key值.下面的defaultExpandeKeys表示这个树结构默认要展示的节点的key值
                // defaultExpandedKeys={oneDepCodes}
                // defaultExpandedKeys 是默认展开项.只对第一次赋值生效
                // expandedKeys 展开项. 数据变化也会跟着变化
                expandedKeys={oneDepCodes}
                // 树结构中默认被选中的节点的key值.如果选中了节点有一个绿色的背景颜色
                defaultSelectedKeys={['0-0-1']}
                // 树结构中的复选框默认被选中的节点的key值.
                defaultCheckedKeys={['0-0-0', '0-0-1']}
                // 点击节点触发的事件
                onSelect={onSelect}
                // 树结构的数据
                treeData={depList as any}
                // 注意: Tree组件默认将数据对象的title值作为节点的文本,将数据对象的key值作为内部使用的key.但是我们拿到的科室数据对象中没有title和key.所以要告诉Tree组件,要把depname作为title,把depcode作为key
                fieldNames={{
                  title: 'depname',
                  key: 'depcode',
                }}
              />
            </div>
          </Col>
          <Col span={19}>
            {schedule.map((item, index) => (
              <Tag
                color={item.workDate === workDate ? 'green' : ''}
                key={index}
                onClick={() => {
                  // 点击的tag是谁,则将谁的workDate赋值给状态workDate
                  setWorkDate(item.workDate)
                }}
                style={{ marginBottom: 10 }}
              >
                <div>
                  {item.workDate} {item.dayOfWeek}
                </div>
                <div>
                  {item.availableNumber} / {item.reservedNumber}
                </div>
              </Tag>
            ))}

            <Pagination
              style={{ marginBottom: 10 }}
              total={total}
              pageSize={pageSize}
              showSizeChanger={true}
              pageSizeOptions={[5, 10, 15]}
              onChange={(page, pageSize) => {
                setPage(page)
                setPageSize(pageSize)
                getSchedule(page, pageSize, depcode)
              }}
            ></Pagination>

            <Table
              columns={columns}
              dataSource={[{}, {}]}
              bordered
              pagination={false} //如果Table不需要分页器,则设置为false
            ></Table>
            <Button style={{ marginTop: 10 }}>返回</Button>
          </Col>
        </Row>
      </div>
    </Card>
  )
}
